<template>
  <div class="page become-page">
    <van-nav-bar
      :title="isUpgrade?'成为团长':'团长续约'"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="container">
      <div class="become-title">
        <h1>立刻成为团长</h1>
      </div>
      <info-block title="团长介绍">
        <ul>
          <li>A.团长是唯一具有发团资格的人</li>
          <li>B.每次成功开团获得拼团金额的 {{agent?agent.prize_rate:10}}%</li>
          <li>C.升级团长获得奖励额度 {{agent?agent.total_award:0}}, 用完前未续约自动降级</li>
        </ul>
      </info-block>
      <info-block title="团长申请条件">
        <ul>
          <li>A.升级或续约消耗 {{agent?agent.cost_credit:0}} 积分</li>
        </ul>
      </info-block>
      <div class="text-center">
        <a class="trial-btn" href="javascript:" @click="experienceLeader">成为体验团长</a>
      </div>
      <div class="text-center margin-top">
        <van-button round type="primary" @click="upgradeLeader">立刻{{isUpgrade?'成为':'续约'}}团长</van-button>
      </div>
    </div>
  </div>
</template>
<script >
export default {
  data() {
    return {
      agent: null,
      eAgent: null
    };
  },
  computed: {
    member() {
      return this.$store.state.userinfo;
    },
    isUpgrade() {
      return (
        !this.agent || this.$store.state.userinfo.is_agent != this.agent.id
      );
    }
  },
  mounted() {
    this.$store.dispatch("checkUserinfo");
    this.loadAgents();
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    loadAgents() {
      this.$api.post("common/data", { keys: "agents" }).then(json => {
        if (json.code == 1) {
          let agents = json.data.agents;
          if (agents) {
            let cagent = null;
            for (let i in agents) {
              if (
                agents[i].cost_credit > 0 &&
                (!cagent || cagent.cost_credit < agents[i].cost_credit)
              ) {
                if (cagent) this.eAgent = cagent;
                cagent = agents[i];
              }
            }
            this.agent = cagent;
          }
        }
      });
    },
    upgradeLeader() {
      if (!this.agent) {
        this.$toast.fail("资料初始化错误");
        return false;
      }
      if (this.member.credit < this.agent.cost_credit) {
        this.$toast.fail("您的积分不足");
        return false;
      }
      this.$dialog.confirm({
        message: "确定消耗" + this.agent.cost_credit + "积分\n升级成功团长?",
        beforeClose: (action, done) => {
          if (action == "confirm") {
            this.$api
              .post("member.agent/upgrade", { agent_id: this.agent.id })
              .then(json => {
                if (json.code == 1) {
                  this.$toast.success(json.msg || "升级成功");
                  this.$router.back();
                }
                if (done) done();
              })
              .catch(err => {
                this.$toast.fail(err.msg || "升级失败");
                if (done) done();
              });
          } else {
            if (done) done();
          }
        }
      });
    },
    experienceLeader() {
      if (!this.eAgent) {
        this.$toast.fail("资料初始化错误");
        return false;
      }
      if (this.member.credit < this.eAgent.cost_credit) {
        this.$toast.fail("您的积分不足");
        return false;
      }
      this.$dialog.confirm({
        message:
          "确定消耗 " +
          this.eAgent.cost_credit +
          " 积分\n升级成功体验团长?\n(可获得 " +
          this.eAgent.total_award +
          " 奖励额度)",
        beforeClose: (action, done) => {
          if (action == "confirm") {
            this.$api
              .post("member.agent/upgrade", { agent_id: this.eAgent.id })
              .then(json => {
                if (json.code == 1) {
                  this.$toast.success(json.msg || "升级成功");
                }
                if (done) done();
              })
              .catch(err => {
                this.$toast.fail(err.msg || "升级失败");
                if (done) done();
              });
          } else {
            if (done) done();
          }
        }
      });
    }
  }
};
</script>

<style lang="scss">
.become-page {
  background: url(/static/group/background.png) center center no-repeat;
  background-size: cover;
  .become-title {
    padding-top: 50px;
  }
  h1 {
    text-indent: -99em;
    width: 300px;
    height: 50px;
    background: url(/static/group/groupbuy_title.png) center center no-repeat;
    background-size: contain;
    margin: 0 auto 20px auto;
  }

  .info-block {
    margin: 20px;
  }
  .van-button {
    background: url(/static/group/groupbuy_roundedrectangle3.png) center center
      transparent no-repeat;
    background-size: contain;
    color: #333;
    border: 0;
    width: 260px;
    font-size: 20px;
  }
  a.trial-btn {
    font-size:16px;
    color: #fff;
  }
}
</style>